<template>
	<view class="cartList">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in cateObj.category.bannerUrlList" :key="index">
				<image :src="item" mode=""></image>
			</swiper-item>
		</swiper>

		<!-- 两行文字 -->
		<view class="frontName">
			{{ cateObj.category.frontName }}
		</view>
		<view class="frontDesc">
			{{ cateObj.category.frontDesc }}
		</view>

		<!-- 商品列表展示 -->
		<view class="goodsList">
			<view class="goodsItem" v-for="(item, index) in cateObj.itemList" :key="index" @click="goodsDetail(item)">
				<image :src="item.listPicUrl" mode=""></image>
				<view class="goodsDesc">
					{{ item.name }}
				</view>
				<view class="goodsPrice">￥{{ item.retailPrice }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '../../utils/request.js';
export default {
	name: 'CartList',
	props: ['L1Id'],
	data() {
		return {
			cateList: []
		};
	},
	created() {
		this.getIndexCartData();
	},
	methods: {
		async getIndexCartData() {
			const res = await request('/getIndexCateList');
			console.log(res);
			this.cateList = res.data;
		},
		// 跳转详情页
		goodsDetail(obj) {
			// console.log(obj);
			wx.navigateTo({
				url: '/pages/detail/detail?obj=' + JSON.stringify(obj)
			});
		}
	},
	computed: {
		cateObj() {
			return this.cateList.find((item) => item.category.parentId === this.L1Id);
		}
	}
};
</script>

<style lang="stylus">
.cartList
	swiper
		swiper-item
			height 360rpx
			image
				width 100%
				height 360rpx
	.frontName
		font-size 40rpx
		// font-weight 600
		color #333
		line-height 80rpx
		text-align center
	.frontDesc
		font-size 30rpx
		line-height 60rpx
		color #666
		// font-weight 600
		text-align center
	.goodsList
		display flex
		flex-wrap wrap
		justify-content: space-around
		// 添加一个伪类 当商品数量为基数时最后一个商品靠左展示，不会居中显示
		&::after
			content ''
			width 344rpx
		.goodsItem
			width 344rpx
			height 460rpx
			image
				width 344rpx
				height 344rpx
			.goodsDesc
				font-size 30rpx
				white-space nowrap
				overflow hidden
				text-overflow ellipsis
				// display -webkit-box
				// -webkit-box-orient vertical
				// -webkit-line-clamp 1
			.goodsPrice
				color red
				font-size 36rpx
</style>
